<!--
 * @Date: 2023-02-21 13:40:20
 * @LastEditors: “mengqc1995” “mengqc1995@163.com”
 * @LastEditTime: 2023-07-12 13:58:41
 * @FilePath: \sososn-web-new\src\views\contactUs\index.vue
-->
<template>
  <div class="contactUs">
    <div
      class="contactUs-header flex-col"
      :style="{ background: `url(${imgUrl}) no-repeat`, 'background-size': '100% 100%' }"
    >
      <div class="header-content">
        <p class="text-title">关于多盈数科</p>
        <p class="text-sub">致力于成为“可持续信赖的产业数字化合作伙伴”</p>
      </div>
    </div>
    <div class="contactUs-wapper">
      <div class="group1 flex-row">
        <div class="leftBox flex-col">
          <div class="title-text" data-aos="fade-up">公司简介</div>
          <div class="sub-text" data-aos="fade-up" data-aos-delay="500">
            多盈数科专注大宗建材行业，致力于成为可持续信赖的产业数字化合作伙伴，赋能产业供应链，
            提供一站式的咨询、建设、运营和服务的产业链生态数字化转型、数字经济体解决方案。
          </div>
        </div>
        <el-image
          class="rightBox"
          :src="$getAssetsImages('rightBox.png')"
          data-aos="fade-up"
          data-aos-delay="300"
        />
      </div>
      <div class="group2 flex-col items-center">
        <p class="group2-title" data-aos="fade-up">公司荣誉</p>
        <ul class="group2-items flex-row" data-aos="fade-up" data-aos-delay="300">
          <li v-for="(item, index) in honorList" :key="index" class="flex-col items-center">
            <div class="topBox items-center justify-center">
              <img class="zhengshu" :src="$getAssetsImages(item.url)" />
            </div>
            <p class="text-footer">{{ item.name }}</p>
          </li>
        </ul>
      </div>
      <div class="group3 flex-col items-center">
        <p class="group3-title" data-aos="fade-up">公司价值观</p>
        <ul class="group3-list flex-row" data-aos="fade-up" data-aos-delay="300">
          <li
            v-for="(item, index) in valuesList"
            :key="index"
            :style="{ background: `url(${item.url}) no-repeat`, 'background-size': '100% 100%' }"
          >
            <p class="text-title">{{ item.title }}</p>
            <p class="text-content flex-col">
              <span v-for="(ele, eIndex) in item.contentList" :key="eIndex">{{ ele }}</span>
            </p>
          </li>
        </ul>
      </div>
      <div class="group4 flex-col items-center">
        <p class="group4-title" data-aos="fade-up">联系我们</p>
        <div class="group4-wapper flex-row" data-aos="fade-up" data-aos-delay="300">
          <div class="leftBox">
            <p class="msg-text">地 址：北京市海淀区西北旺路十号院东区14号楼君正大厦B座</p>
            <p class="msg-text">联系电话：4006565308</p>
          </div>
          <div class="rightBox">
            <iframe
              width="100%"
              height="100%"
              frameborder="0"
              src="https://m.amap.com/navi/?dest=116.284588,40.046556&destName=北京市海淀区软件园西二路&hideRouteIcon=1&key=6332f15b0074c1a066c23c36626363b7"
            ></iframe>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const $getAssetsImages = inject('$getAssetsImages')
const imgUrl = $getAssetsImages('contactUs.png')

const honorList = ref([
  {
    url: 'zhengshu.png',
    name: '******证书'
  },
  {
    url: 'zhengshu2.png',
    name: '******证书'
  },
  {
    url: 'zhengshu3.png',
    name: '******证书'
  },
  {
    url: 'zhengshu4.png',
    name: '******证书'
  }
])

const valuesList = ref([
  {
    title: '1个坚持',
    contentList: ['坚持长期主义'],
    url: $getAssetsImages('values1.png')
  },
  {
    title: '2种态度',
    contentList: ['长远规划，及时满足', '价值服务，共同成功'],
    url: $getAssetsImages('values2.png')
  },
  {
    title: '3类实践',
    contentList: ['成熟平台', '可控技术', '深耕运营'],
    url: $getAssetsImages('values3.png')
  }
])
</script>
<style lang="scss" scoped>
/* @use ''; 引入css类 */
@use './scss/index.scss';
</style>
